<template>
	<view class="uiwu">
		<uiwu-list v-if="listData.length" :loading="more">
			<view class="uiwu-list">
				<view class="uiwu-list-item uiwu-flex-space" v-for="(item,index) in listData" :key="index" @tap.stop="tapItem(item)">
					<image :src="item.product_image" mode="aspectFill"></image>
					<view class="in uiwu-flex-column">
						<text class="title uiwu-hidden2">{{item.product_name}}</text>
						<text class="time">{{uiwu.formatTimestamp(item.add_time * 1000)}}</text>
					</view>
					<view v-if="item.appeal_state == 0" class="status" :class="item.state != 0 ? 'active' : ''">{{item.state == 0 ? '抓取失败' : '成功抓中'}}</view>
					<view v-else class="status" :class="item.appeal_state != 3 ? 'active' : ''">
						{{item.appeal_state == 1 ? '审核中' : item.appeal_state == 2 ? '申诉成功' :  '申诉驳回'}}
					</view>
				</view>
			</view>
		</uiwu-list>
		<view v-else class="notedata uiwu-flex-column uiwu-flex-center">
			<image src="/static/notedata.png" mode="widthFix"></image>
			<text>最近7天内没有游戏记录</text>
			<view class="uiwu-flex-center" @tap="goHomeBack">去抓零食</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad , onReachBottom } from '@dcloudio/uni-app'
	import { inject, ref } from "vue";
	import { grablist } from "@/api/api";
	import { uiwu } from '../../config/config';
	
	const listData = ref<Array<object>>([])
	const pageNum = ref<number>(1)
	const more = ref<string>('loading');
	const isLock = ref<boolean>(true)
	const device_id = ref(null)
	/**
	 * tapItem 选择
	 */
	const tapItem = (item) : void => {
		const {appeal_valid,product_image,product_name,id,add_time,appeal_state} = item
		const guoqishijian = appeal_valid - Math.abs(getDay(item.expire_time))
		if(guoqishijian > 0){
			if(device_id.value || device_id.value == 'string'){
				uni.$emit('complaintCallback',{
					name:product_name,
					img:product_image,
					id,
					add_time,
					appeal_state
				})
				uni.navigateBack()
			}else{
				uni.navigateTo({
					url:`/pages/index/complaint?goods=${JSON.stringify({
						name:product_name,
						img:product_image,
						id,
						add_time,
						appeal_state
					})}`
				})
			}
			return 
		}
		uiwu.toast(`超出${Math.abs(guoqishijian)}天的记录不支持申诉哦~`)//不超出就是back回上一层 携带当前选中id
	}
	const getDay = (time) => {
		const currentTimestamp = Math.floor(Date.now() / 1000);
		const daysDifference  = time - currentTimestamp
		return Math.floor( daysDifference / (60 * 60 * 24)) || 0
	}
	const getgrablist = async ( mack : boolean = false ) : Promise<any> =>{
		if(!mack) pageNum.value = 1
		const { data:{ data , total }} = await grablist({
			page:pageNum.value,
			device_id:device_id.value
		})
		isLock.value = true
		uiwu.setlist({
			isMore:mack,
			listData,
			total,
			listRow:data,
			more,
			pageNum
		})
	}
	const goHomeBack = () => {
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
	onReachBottom(()=>{
		if(!isLock.value) return
		isLock.value = false
		pageNum.value++
		getgrablist(true)
	})
	onLoad((e)=>{
		if(e?.device_id && e?.device_id != 'undefined') device_id.value = e.device_id
		getgrablist()
	})
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6;
	}
	.uiwu{
		padding: 20rpx 0;
	}
	.uiwu-list{
		padding: 0 24rpx;
		background-color: #fff;
		&-item{
			padding: 24rpx 0;
			border-bottom: 1rpx solid #E6E6E6;
			&:last-child{
				border-bottom: 0;
			}
			image{
				width: 108rpx;
				height: 108rpx;
				border-radius: 16rpx;
			}
			.in{
				flex: 1;
				padding: 0 24rpx;
				.title{
					font-size: 28rpx;
					font-weight: 800;
					color: #231815;
				}
				.time{
					margin-top: 15rpx;
					font-size: 24rpx;
					font-weight: 300;
					color: #999999;
				}
			}
			.status{
				font-size: 28rpx;
				font-weight: 500;
				color: #EF821E;
				&.active{
					color: #5BB431;
				}
			}
		}
	}
	.notedata{
		width: 100%;
		height: 100vh;
		image{
			width: 220rpx;
		}
		text{
			font-size: 28rpx;
			font-weight: 500;
			color: #444444;
			margin-top: 10rpx;
		}
		view{
			width: 300rpx;
			height: 80rpx;
			background: #EF821E;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-top: 40rpx;
		}
	}
</style>
